<template>
	<view class="container">
		<view class="header">
			<text class="welcome">注册</text> <br>
		</view>
		<view class="login-form">
			<label class="labelmsg">用户名</label>
			<input type="text" v-model="baseFromData.username" class="inputmsg" />
			<label class="labelmsg">密码</label>
			<input type="password" v-model="baseFromData.password" class="inputmsg" />
			<label class="labelmsg">电话号码</label>
			<input type="text" v-model="baseFromData.phone" class="inputmsg" />
			<view class="gender-selection">
				<text class="gender">性别</text>
				<radio-group @change="onGenderChange">
					<label class="radio" v-for="(gender, index) in genders" :key="index">
						<radio :value="gender.value">{{ gender.label }}</radio>
					</label>
				</radio-group>
			</view>
			<!-- 头像上传 -->
			<view class="container1">
				<uni-file-picker disable-preview :del-icon="false" return-type="object" @select="chooseimg">选择头像
				</uni-file-picker>
			</view>
			<button type="primary" @click="handleRegist">注册</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'


	const baseFromData = reactive({
		username: '',
		password: '',
		phone: '',
		type: 1,
		status: 1,
		selecedGender: 1,
		file: ''
	})

	const genders = reactive([{
			value: 1,
			label: '男'
		},
		{
			value: 0,
			label: '女'
		}
	])

	const onGenderChange = (e) => {
		baseFromData.selecedGender = e.detail.value
	}

	const chooseimg = (e) => {
		baseFromData.file = e.tempFilePaths[0]
	}

	const handleRegist = () => {
		uni.uploadFile({
			url: 'http://localhost:3000/user/adduser',
			filePath: baseFromData.file,
			name: 'imgfile',
			formData: {
				'username': baseFromData.username,
				'password': baseFromData.password,
				'phone': baseFromData.phone,
				'type': baseFromData.type,
				'sex': baseFromData.selecedGender,
				'status': baseFromData.status,
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
				uni.showToast({
					title: '注册成功',
					icon: 'none'
				});
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		})

	}
</script>

<style scoped>
	.container {
		margin-top: 50px;
		padding: 15px;
	}

	.welcome {
		font-size: 22px;
		font-weight: bold;
	}

	.login-form {
		margin-top: 45px;
	}

	.labelmsg {
		color: darkgray;
	}

	.inputmsg {
		border: none;
		border-bottom: 1px solid lightgrey;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	button {
		background-color: #1E90FF;
		margin-top: 70px;
		border-radius: 50px;
	}

	.gender-selection {
		/* padding: 20px; */
	}

	.radio {
		display: inline-block;
		margin-bottom: 10px;
		margin-top: 10px;
		color: darkgray;
		transform: scale(0.8);
		margin-right: 45px;
	}

	.gender {
		color: darkgray;
	}

	.container1 {}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		object-fit: cover;
		margin-bottom: 20px;
	}

	.avatar-placeholder {
		width: 100px;
		height: 100px;
		border: 1px dashed #ccc;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
	}
</style>
